<template>
  <div>
    <div>
      <el-row>
        <el-col :span="24">
          <el-tree :data="classifyList" show-checkbox node-key="id" default-expand-all :props="defaultProps" :expand-on-click-node="false">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <el-button type="text" size="mini" @click="() => append(data)">新增</el-button>
              <el-button type="text" size="mini" @click="() => remove(node, data)">删除</el-button>
            </span>
          </span>
          </el-tree>
        </el-col>
      </el-row><br/><br/>
    </div>
    <!--<div>
      <el-row>
        <el-col :span="24">
          <el-table :data="product" style="width: 100%">
            <el-table-column prop="productName" label="品名" >
            </el-table-column>
            <el-table-column prop="productState" label="状态" >
              <template slot-scope="scope">
                <span v-if="scope.row.productState===0">上架</span>
                <span v-if="scope.row.productState===1">下架</span>
              </template>
            </el-table-column>
            <el-table-column prop="productStock" label="库存" >
            </el-table-column>
            <el-table-column prop="productPrice" label="单价" >
            </el-table-column>
            <el-table-column prop="productCost" label="成本价" >
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>-->
  </div>
</template>
<script>
let proclassifyid = 10
export default {
  data () {
    return {
      classifyList: [],
      product: [],
      classify: {
        productClassifyId: 0,
        productClassifyName: '',
        children: '',
        classifyWhether: 1,
        classifyFather: 0,
        productsByProductClassifyId: ''
      },
      defaultProps: {
        id: 'productClassifyId',
        label: 'productClassifyName',
        children: 'children'
      }
    }
  },
  methods: {
    initData () {
      this.$axios.get('http://localhost:8088/pro-classify-list')
        .then(v => {
          this.classifyList = v.data
        })
        .catch(function (v) {
        })
    },
    initData2 (data) {
      this.$axios.get('http://localhost:8088/product-selectPros', {
        params: {
          productClassifyId: data.productClassifyId
        }})
        .then(v => {
          this.product = v.data
          this.children = this.product
        })
        .catch(function (v) {
        })
    },
    append (data) {
      this.classify = {
        productClassifyId: 0,
        productClassifyName: '',
        classifyFather: null,
        classifyWhether: 1,
      }
      if (!data.children) {
        this.$set(data, 'children', [])
      }
      /*data.children.push(this.classify)*/
      this.open()
    },
    remove (node, data) {
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex(d => d.productClassifyId === data.productClassifyId)
      children.splice(index, 1)
      this.handleDelete(index)
    },
    open () {
      this.$prompt('请给当前分类命名', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        this.classify.productClassifyName = value
        this.addClassify()
      }).catch(() => {
      })
    },
    handleDelete (index) {
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(index)
        this.$axios.post('http://localhost:8088/proclassify-deleteOne/', this.qs.stringify(index))
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    addClassify () {
      console.log(this.classify)
      this.$axios.post('http://localhost:8088/add-pro-classify', this.classify)
        .then(v => {
          // 1、刷新数据
          this.initData()
          this.$message({
            message: '新增成功',
            type: 'success'
          });
          // 3、重新初始化表单数据模型
          this.classify = {
            productClassifyId: 0,
            productClassifyName: '',
            children: '',
            classifyWhether: 1,
            classifyFather: 0
          }
        })
        .catch(function (v) {})
    },
  },
  created: function () {
    this.initData()
  }
}
</script>
<style>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
